<template>
  <el-drawer
    :visible.sync="drawer"
    size="65%"
    :append-to-body="true"
    :modal-append-to-body="false"
    :with-header="false"
  >
    <!-- 页面导航 -->
    <div class="menu-container">
      <div class="userInfo" v-if="this.$store.state.userInfo">
        <el-avatar :src="userInfo.avatar"></el-avatar>
        <h3 class="web-font nickname">{{ userInfo.nickname }}</h3>
      </div>
      <div class="menus-item">
        <router-link class="menu-btn" to="/" exact-active-class="active">
          <i class="iconfont iconzhuye" /> <i>首页</i>
        </router-link>
      </div>
      <div class="menus-item">
        <router-link class="menu-btn" to="/essay" exact-active-class="active">
          <i class="iconfont iconfaxian" /> <i>随笔</i>
        </router-link>
      </div>
      <div class="menus-item">
        <router-link
          class="menu-btn"
          to="/technology"
          exact-active-class="active"
        >
          <i class="iconfont iconqita" /> <i>技术</i>
        </router-link>
      </div>
      <div class="menus-item">
        <router-link class="menu-btn" to="/aboutme" exact-active-class="active">
          <i class="iconfont iconzhifeiji" /> <i>关于</i>
        </router-link>
      </div>
      <div class="menus-item">
        <router-link class="menu-btn" to="/message" exact-active-class="active">
          <i class="iconfont iconpinglunzu" /> <i>留言</i>
        </router-link>
      </div>
      <div class="menus-item" v-if="!this.$store.state.userInfo">
        <a @click="login"><i class="iconfont icondenglu" /> 登录 </a>
      </div>
      <div v-else>
        <div class="menus-item">
          <a @click="logout"><i class="iconfont icontuichu" /> 退出</a>
        </div>
      </div>
    </div>
  </el-drawer>
</template>
<script>
import { mapState } from "vuex";
export default {
  data: function () {
    return {};
  },
  computed: {
    drawer: {
      set(value) {
        this.$store.state.drawer = value;
      },
      get() {
        return this.$store.state.drawer;
      },
    },
    ...mapState(["userInfo"]),
  },
  methods: {
    login() {
      this.$store.state.loginFlag = true;
    },
    logout() {
      window.sessionStorage.clear();
      this.$store.commit("getUserInfo");
      this.$message({ message: "退出登录成功", type: "success", offset: 80 });
    },
  },
};
</script>
<style scoped lang="less">
/deep/ .el-drawer__body {
  overflow: auto;
  padding: 42px 12px;
}
.blogger-info {
  padding: 26px 30px 0;
  text-align: center;
}
.blog-info-wrapper {
  display: flex;
  align-items: center;
  padding: 12px 10px 0;
}
.blog-info-data {
  flex: 1;
  line-height: 2;
  text-align: center;
}
hr {
  border: 2px dashed #d2ebfd;
  margin: 20px 0;
}
.menu-container {
  padding: 0 10px 40px;
  animation: 0.8s ease 0s 1 normal none running sidebarItem;
}
.menus-item a {
  padding: 6px 30px;
  display: block;
  line-height: 2;
}
.menus-item i {
  margin-right: 2rem;
}
@keyframes sidebarItem {
  0% {
    transform: translateX(200px);
  }
  100% {
    transform: translateX(0);
  }
}
.userInfo {
  position: relative;
  left: 42%;

  margin-bottom: 50px;
}
</style>

